<script setup lang="ts">
import { cva } from "class-variance-authority";
import { twMerge } from "tailwind-merge";
import { computed } from "vue";

const vars = cva("inline-flex ovdeflow-hidden", {
  variants: {
    rounded: {
      true: "rounded-md",
      false: "rounded-full",
    },
  },
});

const { rounded, size = 90 } = defineProps<{
  rounded?: boolean;
  src?: string;

  size?: number | string;
}>();

const stylesheet = computed(() => {
  if (size) {
    const val = typeof size == "number" ? `${size}rpx` : size;
    return { width: val, height: val };
  }
});
</script>

<template>
  <view
    :class="twMerge(vars({ rounded }), $attrs.class as string)"
    :style="stylesheet"
  >
    <image class="w-full h-full rounded-[inherit]" :src="src" />
  </view>
  <!-- {{ twMerge(vars({ rounded }), $attrs.class as string) }} -->
</template>

<style lang="less" scoped></style>
